<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
            /* 去掉li默认带的小圆点 */
        }
        
        .box {
            /*大盒子的大小*/
            width: 292px;
            margin: 100px auto;
        }
        
        .box li {
            float: left;
            width: 71px;
            height: 75px;
            background-color: #fff;
            border: 1px solid #f4f4f4;
            margin: -1px 0 0 -1px;
        }
        
        .box li span {
            /* span用来放每一个小图片 */
            display: block;
            margin: 11px auto 10px;
            width: 24px;
            height: 24px;
            /* 背景图片 */
            background: url(images/sprite.png) no-repeat 0 0;
        }
        
        .box li strong {
            display: block;
            font-size: 12px;
            text-align: center;
            font-weight: normal;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li><span></span><strong>充话费</strong></li>
            <li><span></span><strong>充话费</strong></li>
            <li><span></span><strong>充话费</strong></li>
            <li><span></span><strong>充话费</strong></li>
            <li><span></span><strong>充话费</strong></li>
            <li><span></span><strong>充话费</strong></li>
            <li><span></span><strong>充话费</strong></li>
            <li><span></span><strong>充话费</strong></li>
            <li><span></span><strong>充话费</strong></li>
            <li><span></span><strong>充话费</strong></li>
            <li><span></span><strong>充话费</strong></li>
            <li><span></span><strong>充话费</strong></li>
        </ul>
    </div>
    <script>
        // 这个背景图的位置其实是有规律的， 每两张之间间隔一个固定长度 为20px， 小图标的长度为24px， 我们就可以得出这个间隔44px。 然后使用这个间隔移动这个大背景图的位置达到精灵图的效果。 我们的每一个span中都会有一个 background - image 因此我们只需要关注 大背景图的纵坐标上的移动。
        var list = document.querySelectorAll('span');
        for (var i = 0; i < list.length; i++) {
            var index = i * 44;
            list[i].style.backgroundPosition = '0 -' + index + 'px';
        }
    </script>

</body>

</html>